<!-- 选择产品图 -->
<template>
	<uni-popup ref="pickerView" type="bottom" :zIndex="9999" background-color="transparent" :safeArea="false">
		<view class="popup-view">
			<view class="header">
				<view class="title flex_center">
					<view class="back">
						<u-icon name="arrow-left" :size="34" color="#333333"></u-icon>
					</view>
					<view class="">选择产品图</view>
				</view>
				<!-- 一级分类 -->
				<scroll-view scroll-x class="classify">
					<view class="scroll_row">
						<view :class="['classify_item', classifyId === item.id ? 'act_classify_item' : '']" v-for="(item, idx) in classifyList" :key="idx">
							<view class="classify_item_name">
								{{ item.name }}
								<image class="classify_icon" src="https://static.jinzhuangli.com/staticFile/images/0x72506293.png" mode="heightFix"></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 一级分类 -->

				<!-- 二级分类 -->
				<scroll-view scroll-x class="classify">
					<view class="scroll_row">
						<view :class="['t_classify_item', classifyId === item.id ? 't_act_classify_item' : '']" v-for="(item, idx) in classifyList" :key="idx">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<!-- 二级分类 -->
			</view>

			<view class="list">
				<view class="shop_card flex">
					<view class="cover">
						<image src="https://static.jinzhuangli.com/upload/20240722/1815279609314115584.jpg?x-oss-process=image/resize,p_55/quality,q_65/format,webp" mode="aspectFill"></image>
					</view>
					<view class="shop_card_left flex_bw">
						<view class="shop_info">
							<view class="shop_info_tit u-line-1">商品名称商品名称</view>
							<view class="shop_info_desc">2张参考图</view>
						</view>
						<u-icon name="arrow-right" :size="34" color="#B0B0B0"></u-icon>
					</view>
				</view>
			</view>

			<!-- 生成图片按钮 -->
			<generateCom />
			<!-- 生成图片按钮 -->
		</view>
	</uni-popup>
</template>

<script>
import generateCom from "./generate.vue";
export default {
	name: "selectProductImg",
	components: { generateCom },
	props: {},
	data() {
		return {
			//一级分类id
			classifyId: "1",
			classifyList: [
				{
					id: "1",
					name: "家装主材"
				},
				{
					id: "2",
					name: "全屋定制"
				},
				{
					id: "3",
					name: "软装家纺"
				},
				{
					id: "4",
					name: "辅材辅料"
				}
				// {
				// 	name:'家装主材'
				// }
			]
		};
	},
	mounted() {},
	methods: {
		close() {
			this.$refs.pickerView.close();
		},
		open() {
			this.$refs.pickerView.open();
		},
		submit() {
			this.close();
		},
		change() {
			this.close();
		}
	}
};
</script>

<style lang="less" scoped>
.popup-view {
	width: 100%;
	min-height: 80vh;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 0 0 calc(180rpx + env(safe-area-inset-bottom) / 2) 0;
	// border-radius: 24rpx 24rpx 0 0;
	// background: linear-gradient( 180deg, rgba(72,108,246,0.1) 0%, rgba(72,108,246,0) 100%);
}
.header {
	.title {
		position: relative;
		padding: 38rpx 34rpx 46rpx 34rpx;
		font-size: #333333;
		font-weight: bold;
		font-size: 34rpx;
		.back {
			position: absolute;
			left: 34rpx;
		}
	}
	.classify {
		padding-left: 34rpx;
		width: 100vw;
		.scroll_row {
			width: 100%;
			color: #777777;
			font-size: 30rpx;
			.classify_item {
				display: inline-block;
				padding-right: 38rpx;
			}
			.act_classify_item {
				color: #222222;
				font-weight: bold;
				.classify_item_name {
					position: relative;
				}
			}
			.act_classify_item.classify_item_name::after {
				position: absolute;
				content: "";
				left: 0;
				bottom: -10rpx;
				width: 100%;
				height: 20rpx;
				background-image: url(https://static.jinzhuangli.com/staticFile/images/0x72506293.png);
				background-repeat: no-repeat;
				background-size: 100% auto;
			}
		}
	}
}

.list {
	padding: 14rpx 30rpx 24rpx 30rpx;
	.shop_card {
		border: 1px solid #edeef0;
		padding: 8rpx 30rpx 8rpx 8rpx;
		border-radius: 16rpx;
		margin-top: 24rpx;
		.cover {
			border-radius: 8rpx;
			width: 112rpx;
			height: 112rpx;
			overflow: hidden;
			margin-right: 22rpx;
		}
		.shop_card_left {
			width: calc(100% - 134rpx);
			.shop_info {
				color: #666666;
				width: 446rpx;
				font-size: 28rpx;
				.shop_info_tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #222222;
					padding-bottom: 16rpx;
				}
			}
		}
	}
}
.header {
	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
	.title {
		position: relative;
		padding: 38rpx 34rpx 46rpx 34rpx;
		font-size: #333333;
		font-weight: bold;
		font-size: 34rpx;
		.back {
			position: absolute;
			left: 34rpx;
		}
	}
	.classify {
		padding-left: 34rpx;
		box-sizing: border-box;
		width: 100vw;
		.scroll_row {
			width: fit-content;
			color: #777777;
			font-size: 30rpx;
			padding-bottom: 30rpx;
			white-space: nowrap;
			.t_classify_item.t_act_classify_item {
				border: 1px solid #333333;
				color: #333333;
			}
			.t_classify_item {
				display: inline-block;
				background-color: #f5f5f5;
				font-size: 24rpx;
				color: #777777;
				padding: 8rpx 24rpx;
				border-radius: 76rpx;
				margin-right: 16rpx;
				background-color: #fff;
				transition: all 0.3s;
			}
			.classify_item {
				display: inline-block;
				padding-right: 38rpx;
				.classify_icon {
					display: none;
				}
			}
			.act_classify_item {
				color: #222222;
				font-weight: bold;
				.classify_item_name {
					position: relative;
					.classify_icon {
						position: absolute;
						width: 100%;
						height: 20rpx;
						display: inline-block;
						left: 0;
						bottom: -4rpx;
						z-index: 7;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
}
</style>
